<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header-box">
      <image class="header-bg" src="../../static/images/workOrder/order_bg.png" mode=""></image>
      <view class="header-title">
        <!-- 返回按钮 -->
        <view class="back-btn" @click="goBack()">
          <uni-icons color="#fff" type="left"></uni-icons>
        </view>
        <view class="header-title-text">工单详情</view>
      </view>
      <!-- 头部信息 状态、ID -->
      <view class="header-info">
        <view class="info-status">{{ orderStatus(orderInfo.orderStatus) }}</view>
        <view class="info-row">
          <view class="row-label">工单ID：</view>
          <view class="row-value">{{ orderInfo.id }}</view>
        </view>
        <view class="info-row">
          <view class="row-label">创建时间：</view>
          <view class="row-value">{{ orderInfo.createTime }}</view>
        </view>
      </view>
      <view :class="['header-sign', orderInfo.isConnect == 2 ? 'noConnect-sign' : 'connect-sign']">
        <image class="sign-img" :src="getImageUrl(orderInfo.isConnect == 2 ? 'noConnect' : 'connect')" mode="widthFix"></image>
        {{ orderInfo.isConnect == 2 ? '拆除' : '跳接' }}工单
      </view>
    </view>
    <!-- 内容区 -->
    <view class="content-box">
      <view class="device-info" v-if="orderInfo.fromDeviceOrderInfo">
        <view class="device-header">
          <image class="header-icon" src="../../static/images/workOrder/origin_icon.png" mode=""></image>
          {{ orderInfo.fromDeviceOrderInfo.name }}
        </view>
        <view class="info-row">
          <view class="row-name">地址：</view>
          <view class="row-value">{{ orderInfo.fromLocation.location }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">楼层：</view>
          <view class="row-value">{{ orderInfo.fromDeviceOrderInfo.l3name }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">房间号：</view>
          <view class="row-value">{{ orderInfo.fromDeviceOrderInfo.l4name }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">机柜名称：</view>
          <view class="row-value">{{ orderInfo.fromDeviceOrderInfo.rackName }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">所在U位：</view>
          <view class="row-value">{{ orderInfo.fromLocation.uName }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">执行端口：</view>
          <view class="row-value">{{ orderInfo.fromDevicePortIndex }}</view>
        </view>
      </view>
      <view class="device-info" v-if="orderInfo.toDeviceOrderInfo">
        <view class="device-header">
          <image class="header-icon" src="../../static/images/workOrder/target_icon.png" mode=""></image>
          {{ orderInfo.toDeviceOrderInfo.name }}
        </view>
        <view class="info-row">
          <view class="row-name">地址：</view>
          <view class="row-value">{{ orderInfo.toLocation.location }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">楼层：</view>
          <view class="row-value">{{ orderInfo.toDeviceOrderInfo.l3name }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">房间号：</view>
          <view class="row-value">{{ orderInfo.toDeviceOrderInfo.l4name }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">机柜名称：</view>
          <view class="row-value">{{ orderInfo.toDeviceOrderInfo.rackName }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">所在U位：</view>
          <view class="row-value">{{ orderInfo.toLocation.uName }}</view>
        </view>
        <view class="info-row">
          <view class="row-name">执行端口：</view>
          <view class="row-value">{{ orderInfo.toDevicePortIndex }}</view>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <view class="btn-item" v-if="orderInfo.orderStatus == 0" @click="toOperate(1)">
        <image class="btn-icon" src="../../static/images/workOrder/execute-icon.png" mode=""></image>
        执行
      </view>
      <view class="btn-item" v-if="orderInfo.orderStatus == 1" @click="toOperate(2)">
        <image class="btn-icon" src="../../static/images/workOrder/execute-icon.png" mode=""></image>
        完成
      </view>
      <view class="btn-item" @click="toOperate(3)">
        <image class="btn-icon" src="../../static/images/workOrder/delete-icon.png" mode=""></image>
        删除
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { onMounted, reactive, toRefs } from 'vue'
  import { getDeviceOrderPort, execute, finish, delDeviceOrderPort } from '@/service/work-order.js'

  // 懒加载图片
  const getImageUrl = (name) => {
    return `../../static/images/index/${name}.png`
  }

  const state = reactive({
    id: '',
    orderInfo: {}
  })
  const { orderInfo } = toRefs(state)

  onLoad((options) => {
    state.id = options.id
    getDetail(state.id)
  })

  //返回
  const goBack = () => {
    uni.navigateBack()
  }

  //获取详情
  const getDetail = (id) => {
    getDeviceOrderPort(id).then((res) => {
      // console.log(res);
      state.orderInfo = res.data
      state.orderInfo.fromLocation = state.orderInfo.fromDeviceOrderInfo ? handleLocation(state.orderInfo.fromDeviceOrderInfo) : ''
      state.orderInfo.toLocation = state.orderInfo.toDeviceOrderInfo ? handleLocation(state.orderInfo.toDeviceOrderInfo) : ''
    })
  }

  //处理位置信息
  const handleLocation = (row) => {
    let location = [],
      floorName = '',
      roomName = ''
    row.locationList.map((item) => {
      if (item.locationType < 5) {
        //截止到楼层前
        location.push(item.name)
      } else if ((item.locationType = 5)) {
        //楼层
        floorName = item.name
      } else if ((item.locationType = 6)) {
        //房间
        roomName = item.name
      }
      return item
    })
    //U位
    let uName = ''
    if (Array.isArray(row.unoIndexList) && row.unoIndexList.length) {
      if (row.unoIndexList.length > 1) {
        uName = `${row.unoIndexList[0]}-${row.unoIndexList[row.unoIndexList.length - 1]}U`
      } else {
        uName = `${row.unoIndexList[0]}U`
      }
    }
    return {
      location: location.join('/'),
      uName
    }
  }

  //工单状态
  const orderStatus = (status) => {
    let statusText = ''
    switch (status) {
      case 0:
        statusText = '未执行'
        break
      case 1:
        statusText = '执行中'
        break
      case 2:
        statusText = '已完成'
        break
    }
    return statusText
  }

  //工单操作
  const toOperate = (type) => {
    let str = type == 1 ? '执行' : type == 2 ? '完成' : '删除'
    uni.showModal({
      title: '提示',
      content: `是否确认${str}当前工单？`,
      success: function (res) {
        if (res.confirm) {
          if (type == 1) {
            //执行
            execute(state.orderInfo),
              then(() => {
                updateDetail()
                uni.showToast({
                  title: '工单执行成功，请操作实际工单任务',
                  icon: 'none'
                })
              })
          } else if (type == 2) {
            //完成
            finish(state.orderInfo).then(() => {
              updateDetail()
              uni.showToast({
                title: '工单已完成！'
              })
            })
          } else if (type == 3) {
            //删除
            delDeviceOrderPort(state.orderInfo.id).then(() => {
              uni.$emit('updateWorkOrder')
              goBack()
              uni.showToast({
                title: '删除成功',
                icon: 'none'
              })
            })
          }
        } else if (res.cancel) {
          console.log('已取消')
        }
      }
    })
  }

  //更新详情
  const updateDetail = () => {
    uni.$emit('updateWorkOrder')
    getDetail(state.id)
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100vh;
    position: relative;
    .header-box {
      box-sizing: border-box;
      width: 100%;
      height: 420rpx;
      padding: 50rpx 0 0 20rpx;
      background: linear-gradient(180deg, #295bf5 0%, rgba(41, 91, 245, 0.78) 73%, rgba(209, 235, 255, 0) 100%);
      position: relative;
      .header-bg {
        display: block;
        width: 210rpx;
        height: 194rpx;
        position: absolute;
        top: 91rpx;
        right: 0;
      }
      .header-title {
        width: 100%;
        display: flex;
        align-items: center;
        .back-btn {
          margin-right: 14rpx;
          :deep(.uni-icons) {
            font-size: 32rpx !important;
            color: #fff;
            line-height: 32rpx;
          }
        }
        .header-title-text {
          font-weight: bold;
          font-size: 32rpx;
          color: #ffffff;
        }
      }
      .header-info {
        box-sizing: border-box;
        padding-left: 34rpx;
        margin-top: 42rpx;
        .info-status {
          font-size: 41rpx;
          font-weight: bold;
          color: #ffffff;
          line-height: 65rpx;
          margin-bottom: 16rpx;
        }
        .info-row {
          font-size: 23rpx;
          color: #ffffff;
          line-height: 34rpx;
          display: flex;
          align-items: center;
          .row-label {
            width: 130rpx;
          }
        }
      }
      .header-sign {
        box-sizing: border-box;
        width: 148rpx;
        height: 64rpx;
        padding-top: 8rpx;
        background: #ffefc6;
        border-radius: 8rpx;
        font-size: 23rpx;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: absolute;
        top: 275rpx;
        right: 30rpx;
        .sign-img {
          width: 23rpx;
          margin: 6rpx 4rpx 0 0;
        }
      }
      .connect-sign {
        background-color: #fff5db;
        color: #eb9000;
      }
      .noConnect-sign {
        background-color: #ffe6e5;
        color: #f24d4d;
      }
    }
    .content-box {
      box-sizing: border-box;
      width: 689rpx;
      height: calc(100% - 532rpx);
      padding: 18rpx;
      box-shadow: 0rpx 2rpx 2rpx 0rpx #dbdee6;
      border-radius: 8rpx;
      background-color: #fff;
      margin: -100rpx auto 0;
      overflow-y: auto;
      position: relative;
      .device-info {
        width: 100%;
        &:first-child {
          margin-bottom: 20rpx;
        }
        .device-header {
          box-sizing: border-box;
          width: 100%;
          height: 53rpx;
          padding-left: 20rpx;
          background-image: url('../../static/images/workOrder/title_bg.png');
          font-size: 26rpx;
          font-weight: bold;
          color: #262d37;
          display: flex;
          align-items: center;
          margin-bottom: 15rpx;
          .header-icon {
            display: block;
            width: 32rpx;
            height: 28rpx;
            margin-right: 9rpx;
          }
        }
        .info-row {
          box-sizing: border-box;
          padding: 0 25rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .row-name,
          .row-value {
            font-size: 23rpx;
            color: #282d3f;
            line-height: 39rpx;
          }
        }
      }
    }
    .btn-box {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 20rpx;
      overflow: hidden;
      box-shadow: 0rpx 0rpx 10px 1px #dbdee6;
      position: absolute;
      bottom: 40rpx;
      left: 20rpx;
      .btn-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 250rpx;
        height: 90rpx;
        font-size: 26rpx;
        color: #282d3f;
        position: relative;
        &:first-child {
          &::after {
            content: '';
            display: block;
            width: 1rpx;
            height: 61rpx;
            border-right: 1rpx solid #d0ebff;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .btn-icon {
          display: block;
          width: 38rpx;
          height: 38rpx;
          margin-right: 20rpx;
        }
      }
    }
  }
</style>
